<template>
	<view :class="btmBarClass" ref="btmBar">
		<view class="top">
			<view class="left-btn">
				<template v-if="leftBtnMode === 'collect'">
					<view @click="$emit('on-collect', currentTopic)">
						<image v-show="currentTopic.collect !== null" src="../static/answer/collected.png"></image>
						<image v-show="currentTopic.collect === null" src="../static/answer/uncollected.png"></image>
						<text>{{ currentTopic.collect ? '收藏' : '收藏' }}</text>
					</view>
				</template>
				<template v-else>
					<view @click="$emit('submit')">
						<image style="width: 32upx;height: 32upx;" src="../static/answer/submit.png"></image>
						<text style="color: #5fba4a;">{{ leftBtnMode === 'submit' ? '提交' : '交卷' }}</text>
					</view>
				</template>
			</view>
			<view class="answer-info">
				<template v-if="isCorrecting && !isRecitation">
					<view class="true-count" v-if="showFalseCount && showRightCount">
						<image src="../static/answer/true-bg.png"></image>
						<text>{{ topicCount.right }}</text>
					</view>
					<view class="false-count" v-if="showFalseCount">
						<image src="../static/answer/false-bg.png"></image>
						<text>{{ topicCount.false }}</text>
					</view>
				</template>
				<view class="not-answer" v-if="showUnansweredCount">
					<image src="../static/answer/not-answer.png"></image>
					<text>{{ totalCount - topicCount.right - topicCount.false }}</text>
				</view>
				<view class="que-index" @click="$emit('update:isFold', !isFold)">
					<image src="../static/answer/answer-card.png"></image>
					<text>{{ topicNumber }}</text>
					<text class="que-index-all">/{{ totalCount }}</text>
				</view>
			</view>
		</view>
		<view class="answer-card">
			<u-collapse @change="onCollapseChange">
				<template v-for="(type, type_index) in topicType">
					<u-collapse-item v-if="type.count > 0" :open="!groupOrNot" modeType="答题卡" :disabled="!groupOrNot" ref="collapse" :key="type.name">
						<template slot="title">
							<view class="title">
								<text>{{ type.name }}</text>
								<text v-if="type.score">(每道{{ type.score }}分， 共{{ type.count }}道)</text>
								<text v-else>(共{{ type.count }}道)</text>
							</view>
						</template>
						<view v-if="groupOrNot" class="tab-container">
							<view class="tab">
								<view :class="isTabActived(group)" @click="selectTopicGroup(group, type_index)" v-for="(group, group_index) in type.group" :key="'group' + group_index">
									{{ `${group.start}-${group.end}` }}
								</view>
							</view>
							<view class="container">
								<view :class="cardList(cardIndex)" @click="onCardClick(cardIndex)" v-for="cardIndex in showGroup" :key="'tp-card' + cardIndex">{{ cardIndex }}</view>
							</view>
						</view>
						<view v-else class="container">
							<view @click="onCardClick(type.startIndex + number)" :class="cardList(type.startIndex + number)" v-for="number in type.count" :key="'tp-card' + number">
								{{ number + type.startIndex }}
							</view>
						</view>
					</u-collapse-item>
				</template>
			</u-collapse>
		</view>
		<view class="btm" v-if="clearHistory && !isRecitation">
			<text>清除记录，重新开始做题</text>
			<button type="default" @click="$emit('clear-history')">清除当前做题记录</button>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		topicList: {
			type: Array,
			required: true
		},
		currentTopic: {
			type: Object,
			required: true
		},
		topicIndex: {
			type: Number,
			required: true
		},
		topicNumber: {
			type: Number,
			required: true
		},
		topicInfo: {
			type: Object,
			required: true
		},
		topicCount: {
			type: Object,
			required: true
		},
		isFold: Boolean,
		leftBtnMode: String,
		showUnansweredCount: Boolean,
		showRightCount: Boolean,
		showFalseCount: Boolean,
		clearHistory: Boolean,
		isCorrecting: Boolean,
		isRecitation: Boolean,
	},
	data() {
		return {
			isFoldBtmBar: true,
			topicType: [],
			groupCount: 100,
			showGroup: []
		};
	},
	created() {
		['单选题', '多选题', '判断题'].map(name => {
			this.topicType.push({ name, count: 0, startIndex: 0, group: null, score: null });
		});
		//题目数量 / 分值;
		this.topicType[0].count = this.singleCount;
		this.topicType[0].score = this.singleScore;
		this.topicType[1].count = this.multipleCount;
		this.topicType[1].score = this.multipleScore;
		this.topicType[2].count = this.judgmentCount;
		this.topicType[2].score = this.judgementScore;
		//题目开始下标
		this.topicType[1].startIndex = this.singleCount;
		this.topicType[2].startIndex = this.singleCount + this.multipleCount;
		//题号分组
		if (this.groupOrNot) {
			this.topicType[0].group = this.groupTopicNumber(this.singleCount, 0, this.groupCount);
			this.topicType[1].group = this.groupTopicNumber(this.multipleCount, this.topicType[1].startIndex, this.groupCount);
			this.topicType[2].group = this.groupTopicNumber(this.judgmentCount, this.topicType[2].startIndex, this.groupCount);
		}
	},
	computed: {
		groupOrNot() {
			//原默认是大于300隐藏，现在改为10000达到不让隐藏的目的
			return this.totalCount >= 10000;
		},
		btmBarClass() {
			const classList = ['btm-bar'];
			if (!this.isFold) classList.push('btm-bar--unfold');
			return classList;
		},
		judgmentCount() {
			return this.topicInfo.trueFalseCount;
		},
		judgementScore() {
			return this.topicInfo.trueFalseScore;
		},
		singleCount() {
			return this.topicInfo.singleChoiceCount;
		},
		singleScore() {
			return this.topicInfo.singleChoiceScore;
		},
		multipleCount() {
			return this.topicInfo.multipleChoiceCount;
		},
		multipleScore() {
			return this.topicInfo.multipleChoiceScore;
		},
		totalCount() {
			return this.judgmentCount + this.singleCount + this.multipleCount;
		}
	},
	methods: {
		isTabActived(group) {
			if (this.showGroup[0] === group.start) return 'tab-active';
		},
		selectTopicGroup(group, index) {
			const cardIndex = [];
			for (let i = group.start; i <= group.end; i++) cardIndex.push(i);
			this.showGroup = cardIndex;
			this.$nextTick(function() {
				this.$refs.collapse[index].init();
			});
		},
		cardList(cardIndex) {
			//cardindex
			const classList = ['card'];
			if (this.topicList[cardIndex - 1] === undefined) throw new Error('topicInfo中题目的数量与题目列表数组长度topicList不匹配！');
			const { isCorrect, userChoice } = this.topicList[cardIndex - 1];
			const { topicNumber } = this;
			//背题模式只显示当前选中项
			// if (this.isRecitation) return classList;
			if (userChoice) classList.push('answered');
			if (topicNumber === cardIndex) classList.push('active');
			if (this.isCorrecting) {
				if (isCorrect === true) classList.push('right');
				if (isCorrect === false) classList.push('false');
			}
			return classList;
		},
		onCardClick(topicNumber) {
			this.$emit('on-card-change', topicNumber);
		},
		onCollapseChange(index) {
			//切换答题卡题型选项卡时，自动展开第一个
			if (this.groupOrNot) this.selectTopicGroup(this.topicType[index].group[0], index);
		},
		groupTopicNumber(count, baseNumber, groupSize = 100) {
			//对题号进行分组
			const group = [];
			const fullGroup = count / groupSize;
			for (let i = 1; i < fullGroup + 1; i++) {
				const start = (i - 1) * groupSize + 1;
				let end;
				if (fullGroup < i && count % groupSize) end = count;
				else end = i * groupSize;
				end && group.push({ start: start + baseNumber, end: end + baseNumber });
			}
			return group;
		}
	}
};
</script>

<style scoped lang="scss">
.tab {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	overflow-y: scroll;
	view {
		white-space: nowrap;
		padding: 0 20upx;
		border-radius: 26upx;
		line-height: 52upx;
		background-color: #f5f5f5;
		color: #5a5e66;
	}
	view + view {
		margin-left: 30upx;
	}
}
.btm-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: all 0.2s ease-in-out;
	transform: translate3d(0, calc(100% - 100upx), 0);
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	.top {
		display: flex;
		height: 100upx;
		line-height: 100upx;
		padding: 0 30upx;
		image {
			margin-right: 12upx;
		}
		.answer-info {
			display: flex;
			align-items: center;
			view {
				display: flex;
				align-items: center;
				image {
					width: 28upx;
					height: 28upx;
				}
			}
			view + view {
				margin-left: 40upx;
			}
			.que-index {
				letter-spacing: 2upx;
				image {
					height: 32upx;
					width: 32upx;
				}
			}
		}
		.left-btn {
			flex: 1;
			display: flex;
			align-items: center;
			view {
				display: flex;
				align-items: center;
				image {
					width: 28upx;
					height: 28upx;
				}
				text {
					font-size: 28upx;
					font-weight: 400;
					color: #5a5e66;
				}
			}
		}
	}
	.answer-card {
		height: 800upx;
		overflow-y: scroll;
		overscroll-behavior: auto contain;
		.title {
			line-height: 70upx;
			font-size: 28upx;
			font-weight: 400;
			color: #5a5e66;
			text:first-child {
				margin-right: 10upx;
			}
			text:last-child {
				color: #a9abb0;
			}
		}
		.container {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			grid-row-gap: 30upx;
			padding: 30upx;
		}
		.tab-container {
			display: flex;
			flex-direction: column;
			padding-top: 30upx;
			.tab {
				padding: 0 30upx;
				.tab-active {
					background-color: #c6c8cc;
				}
			}
		}
		.card {
			text-align: center;
			width: 88upx;
			height: 88upx;
			line-height: 88upx;
			border: 1px solid #c6c8cc;
			font-size: 32upx;
			font-weight: 400;
			color: #787d89;
			border: 1px solid #c6c8cc;
			border-radius: 50%;
			transition: all 0.2s ease-in-out;
		}
		.card.answered{
			border-color: rgba(198, 200, 204, 0);
			color: #3f7bf2;
		}
		.card.active.false
		.card.answer-card.active{
			border-color: #adafb2!important
		}
		.card.false{
			border-color: rgba(198, 200, 204, 0)
		}
		.active.answered {
			border-color:#3f7bf2;
			color: #3f7bf2;
		}
		.active {
			border-color: #5fba4a;
			background: #ffffff;
		}
		.right {
			color: #5fba4a!important;
			background: rgba(95, 186, 74, 0.15) !important;
		  // border: 1px solid #5fba4a;
		}
		.false{
			color: #f45c4b!important;
			background: rgba(244, 92, 75, 0.15) !important;
			// border: 1px solid #f45c4b;
		}
		.answered{
			background: rgba(63, 123, 242, 0.15);
		}
		.answered.right{
		  border-color:rgba(95, 186, 74, 0)
		}
		.answered.false{
			 border-color: rgba(244, 92, 75, 0)
		}
		.answered.active.right {
			border: 1px solid #5fba4a;
			border-color: rgb(95, 186, 74) !important;
		}
		.answered.active.false, .card.active.false{
			border: 1px solid #f45c4b;
			border-color: rgb(244, 92, 75) !important;
		}

	}
	.btm {
		line-height: 90upx;
		background: #f2f5fa;
		display: flex;
		align-items: center;
		font-size: 26upx;
		padding: 0 30upx;
		text {
			flex: 1;
			color: #363940;
		}
		button {
			color: #f45c4b;
			line-height: 48upx;
			padding: 0 20upx;
			font-size: 26upx;
			border: 1px solid #f45c4b;
			border-radius: 24upx;
		}
		button:after {
			border: none;
		}
	}
}
.btm-bar--unfold {
	transform: translate3d(0, 0, 0);
}
.false-count {
	text {
		color: #f45c4b;
	}
}
.que-index-all {
	color: #787d89;
}
/deep/ .u-collapse-head {
	margin: 0;
	padding: 0 30upx;
	background-color: #f5f5f5;
	border: none;
	height: 70upx;
	line-height: 70upx;
}
/deep/ .u-collapse-body {
	margin-left: 0;
	background-color: #ffffff;
}
// /deep/ .u-collapse-content {
// 	padding: 30upx 0;
// }
</style>
